<script setup lang="ts">
    import PanelGroup from './components/PanelGroup.vue'
    import {ElRow, ElCol, ElCard, ElDivider, ElSkeleton} from 'element-plus'
    import {CountTo} from '@/components/CountTo'
    import {Echart} from '@/components/Echart'
    import {lineOptions} from './echarts-data'
    import {ref, reactive} from 'vue'
    import {useDesign} from '@/hooks/web/useDesign'
    import {
        getMonthlyCourse,
        overviewCourse,
        overviewShopping,
        todayAccount,
        yesterdayAccount,
        monthAccount,
        allUsers
    } from '@/api/asd/analysis'
    import {set} from 'lodash-es'
    import {EChartsOption} from 'echarts'
    import {useI18n} from '@/hooks/web/useI18n'
    import type {user} from '@/api/asd/analysis/types'
    import { useRouter } from 'vue-router'

    const {push} = useRouter()

    const {t} = useI18n()

    const {getPrefixCls} = useDesign()

    const prefixCls = getPrefixCls('panel')

    const loading = ref(true)

    const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption

    /* 页面跳转 */
    const tiao = () =>{
        push("/components/table/default-table");
    }
    // 每月销售总额
    const getMonthly = async () => {
        const res = await getMonthlyCourse().catch(() => {
        })
        if (res) {
            set(
                lineOptionsData,
                'xAxis.data',
                res.data.weekData
            )
            set(lineOptionsData, 'series', [
                {
                    name: t('analysis.estimate'),
                    smooth: true,
                    type: 'line',
                    data: res.data.week,
                    animationDuration: 2800,
                    animationEasing: 'cubicInOut'
                },
                {
                    name: t('analysis.actual'),
                    smooth: true,
                    type: 'line',
                    itemStyle: {},
                    data: res.data.week,
                    animationDuration: 2800,
                    animationEasing: 'quadraticOut'
                }
            ])
        }
    }
    const getAllApi = async () => {
        await Promise.all([getMonthly()])
        loading.value = false
    }
    getAllApi()
    /* 用户总览、商品总览 */
    let totalState = reactive<user>({
        course: 0,
        shop: 0,
        today: 0,
        yesterday: 0,
        month: 0,
        allUser: 0,
    })
    const getCountState = async () => {
        const res1 = await overviewCourse().catch(() => {
        }).finally(() => {
            loading.value = false
        })
        const res2 = await overviewShopping().catch(() => {
        }).finally(() => {
            loading.value = false
        })
        const res3 = await todayAccount().catch(() => {
        }).finally(() => {
            loading.value = false
        })
        const res4 = await yesterdayAccount().catch(() => {
        }).finally(() => {
            loading.value = false
        })
        const res5 = await monthAccount().catch(() => {
        }).finally(() => {
            loading.value = false
        })
        const res6 = await allUsers().catch(() => {
        }).finally(() => {
            loading.value = false
        })
        if (res1) {
            totalState.course = res1.data
        }
        if (res2) {
            totalState.shop = res2.data
        }
        if (res3) {
            totalState.today = res3.data
        }
        if (res4) {
            totalState.yesterday = res4.data
        }
        if (res5) {
            totalState.month = res5.data
        }
        if (res6) {
            totalState.allUser = res6.data
        }
    }
    getCountState()

</script>
<template>
    <PanelGroup/>
    <ElRow :gutter="20">
        <ElCol :span="24">
            <ElCard shadow="hover" class="center-box">
                <template #header>
                    <div class="card-header">
                        <span style="font-weight: 700"> 运营快捷入口 </span>
                    </div>
                </template>
                <div class="text item" >
                    <ul style="height: 100px;">
                        <li><Icon icon="mdi:account-cog" :size="80" color="#1ABC9C" @click="tiao"></Icon><p style="text-align: center;font-size: 16px;" >账户设置</p></li>
                        <li><Icon icon="ri:question-answer-fill" :size="80" color="#1ABC9C"/><p style="text-align: center;font-size: 16px;">微圈评论</p></li>
                        <li><Icon icon="system-uicons:circle-menu" :size="80" color="#1ABC9C"/><p style="text-align: center;font-size: 16px;">课程评论</p></li>
                        <li><Icon icon="uis:layer-group" :size="80" color="#1ABC9C"/><p style="text-align: center;font-size: 16px;">课程列表</p></li>
                        <li><Icon icon="system-uicons:book-text" :size="80" color="#1ABC9C"/><p style="text-align: center;font-size: 16px;">微圈列表</p></li>
                        <li><Icon icon="ci:search" :size="80" color="#1ABC9C"/><p style="text-align: center;font-size: 16px;">课程审核</p></li>
                        <li><Icon icon="ci:search" :size="80" color="#1ABC9C"/><p style="text-align: center;font-size: 16px;">微圈审核</p></li>
                        <li><Icon icon="ci:note" :size="80" color="#1ABC9C"/><p style="text-align: center;font-size: 16px;">审核日志</p></li>
                    </ul>
                </div>
            </ElCard>
        </ElCol>
        <ElCol :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
            <ElCard shadow="hover" class="box-card">
                <template #header>
                    <div class="card-header">
                        <span style="font-weight: 700">商品总览</span>
                    </div>
                </template>
                <div class="text item">
                    <ElRow class="row-box">
                        <ElCol :span="12">
                            <ElSkeleton :loading="loading" animated :row="2">
                                <template #default>
                                    <div :class="`${prefixCls}__item flex justify-center`">
                                        <div class="flex flex-col justify-between">
                                            <CountTo class="text-color text-40px text-center" :start-val="0"
                                                     :end-val="totalState.course"/>
                                            <El-Divider/>
                                            <div :class="`${prefixCls}__item--text  text-gray-1000 text-center`">
                                                课程数量(已上架)
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </ElSkeleton>
                        </ElCol>
                        <ElCol :span="12">
                            <ElSkeleton :loading="loading" animated :row="2">
                                <template #default>
                                    <div :class="`${prefixCls}__item flex justify-center`">
                                        <div class="flex flex-col justify-between">
                                            <CountTo class="text-color text-40px text-center" :start-val="0"
                                                     :end-val="totalState.shop"/>
                                            <El-Divider/>
                                            <div :class="`${prefixCls}__item--text text-gray-1000 text-center`">
                                                商品数量(已上架)
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </ElSkeleton>
                        </ElCol>
                    </ElRow>
                </div>
            </ElCard>
        </ElCol>
        <ElCol :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
            <ElCard shadow="hover" class="box-card">
                <template #header>
                    <div class="card-header">
                        <span style="font-weight: 700">用户总览</span>
                    </div>
                </template>
                <div class="text item">
                    <ElRow class="row-box">
                        <ElCol :span="6">
                            <ElSkeleton :loading="loading" animated :row="2">
                                <template #default>
                                    <div :class="`${prefixCls}__item flex justify-center`">
                                        <div class="flex flex-col justify-between">
                                            <CountTo class="text-color text-40px text-center" :start-val="0"
                                                     :end-val="totalState.today"/>
                                            <El-Divider/>
                                            <div :class="`${prefixCls}__item--text text-gray-1000 text-center`">今日新增
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </ElSkeleton>
                        </ElCol>
                        <ElCol :span="6">
                            <ElSkeleton :loading="loading" animated :row="2">
                                <template #default>
                                    <div :class="`${prefixCls}__item flex justify-center`">
                                        <div class="flex flex-col justify-between">
                                            <CountTo class="text-color text-40px text-center" :start-val="0"
                                                     :end-val="totalState.yesterday"/>
                                            <El-Divider/>
                                            <div :class="`${prefixCls}__item--text text-gray-1000 text-center`">昨日新增
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </ElSkeleton>
                        </ElCol>
                        <ElCol :span="6">
                            <ElSkeleton :loading="loading" animated :row="2">
                                <template #default>
                                    <div :class="`${prefixCls}__item flex justify-center`">
                                        <div class="flex flex-col justify-between">
                                            <CountTo class="text-color text-40px text-center" :start-val="0"
                                                     :end-val="totalState.month"/>
                                            <El-Divider/>
                                            <div :class="`${prefixCls}__item--text text-gray-1000 text-center`">本月新增
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </ElSkeleton>
                        </ElCol>
                        <ElCol :span="6">
                            <ElSkeleton :loading="loading" animated :row="2">
                                <template #default>
                                    <div :class="`${prefixCls}__item flex justify-center`">
                                        <div class="flex flex-col justify-between">
                                            <CountTo class="text-color text-40px text-center" :start-val="0"
                                                     :end-val="totalState.allUser"/>
                                            <El-Divider/>
                                            <div :class="`${prefixCls}__item--text text-gray-1000 text-center`">全部用户
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </ElSkeleton>
                        </ElCol>
                    </ElRow>
                </div>
            </ElCard>
        </ElCol>
        <ElCol :span="24" class="margin-text">
            <ElCard shadow="hover" class="mb-20px">
                <template #header>
                    <div class="card-header">
                        <span style="font-weight: 700">课程统计</span>
                    </div>
                </template>
                <ElSkeleton :loading="loading" animated :rows="4">
                    <Echart :options="lineOptionsData" :height="350"/>
                </ElSkeleton>
            </ElCard>
        </ElCol>
    </ElRow>
</template>

<style lang="less" scoped>
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .box-card {
        width: 720px;
        height: 240px;
    }

    .margin-text {
        margin-top: 20px;
    }
    .text-color {
        color: #F04844;
    }
    .center-box{
        margin-bottom: 20px;
    }
    .text ul li{
        float: left;
        padding-left: 47px;
        padding-right: 50px;
    }
</style>
<style lang="less">
    /* 它本身边框的颜色 */
    .el-card__header{
        background-color: #F3F3F3;
        border-color: #C0C0C0;
    }
</style>
